<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template >


    <div :style="{ backgroundColor: (viewFormData.option.bgColor||'') ,backgroundImage: 'url(' +   (viewFormData.option.bgImg||'') + ')',minHeight:'100%'}"  class="formPreview">



<!--     <div  v-if=" viewFormData.option.carousels">-->
<!--         <el-carousel indicator-position="outside">-->
<!--             <el-carousel-item v-for="item in  viewFormData.option.carousels" >-->
<!--                 <h3>{{ item }}</h3>-->
<!--             </el-carousel-item>-->
<!--         </el-carousel>-->
<!--     </div>-->
    <div class="formDiv" :style="{ backgroundColor:  viewFormData.option.bgColor ,marginLeft: ( viewFormData.option.bgMargin||0)+'%',marginRight: ( viewFormData.option.bgMargin||0)+'%'}">
        <div v-if="viewFormData.option.showTitle">
            <div class="formTilte" v-if="!isMobile"> {{viewFormData.option.tableComment}}</div>
            <div  v-if="viewFormData.print && viewFormData.option.printShowTitle">
                <table style="width: 100%;">
                    <tbody>
                    <tr>
                        <td style="width: 100px;padding-left:20px">申请人：</td>
                        <td>{{viewFormData.form.createrName}}</td>
                        <td rowspan="2" style="width: 120px;">

                            <qrcode-vue  ref="qrcode" class="qrcode" level="H" :size="64" :value="qrFormUrl"/>


                        </td>
                    </tr>
                    <tr>
                        <td  style="width: 100px;padding-left:20px">申请时间：</td>
                        <td>{{formatDate(viewFormData.form.createTime)}}</td>
                    </tr>
                    </tbody>
                </table>

            </div>
        </div>
    <basic-container >

<!--        <el-steps :active="isGroupIndex" v-if="viewFormData.option.isGroup &&viewFormData.option.group.length>1">-->
<!--            <el-step-->
<!--                    v-for="(item, index) in  viewFormData.option.group"-->
<!--                    :icon="!index ? 'el-icon-document-checked' : 'el-icon-success'"-->
<!--                    :key="index"-->
<!--                    @click.native="handleStep(index)"-->
<!--                    :title="item.label">-->
<!--            </el-step>-->
<!--        </el-steps>-->

        <div  :class = "{ formGrid :viewFormData.option.isGrid }" >
        <avue-form
                :class="formClass"
                :option="viewFormData.option"
                v-model="viewFormData.form"
                @submit="handleSubmit">

            <template #menu-form="{size}">
              <div style="margin: 10px 0px;">
                <el-button style="order: 2" size="medium" type="primary"   icon="el-icon-print"   @click="printCommHanderPreview" v-if="!viewFormData.print&&viewFormData.option.printCommBtn &&!isMobile ">打印预览</el-button>

                <!--                <el-button style="order: 2" size="medium" type="primary"   icon="el-icon-print"   @click="printCommHander" v-if="!isPrintView&&viewFormData.print">打印</el-button>-->
                <div  v-for="baseButton in baseButtonInfo"  :key="baseButton" class="btnList" v-if="!isPrintView">
                  <el-button  style="order: 2" size="medium" type="primary"   icon="baseButton.icon"   v-if="baseButton.display&&baseButton.auth"  @click="runTask(baseButton)">
                    {{ baseButton.name }}
                  </el-button>
                </div>
              </div>

            </template>

        </avue-form>
        </div>

    </basic-container>


    <!-- 查看审批详情 -->
    <audit-detail :auditDetail="auditDetailInfo"></audit-detail>

    <task-change-information-collection
            :taskChangeInformationCollection="
          taskChange.taskChangeInformationCollection
        "
            :choosePerson="taskChange.choosePerson"
            :changeKey="taskChange.changeKey"
            :changeName="taskChange.changeName"
            :maxRows="taskChange.maxRows"
            @transferTransact="transferTransact"
            @delegate="delegate"
            @cancelDelegate="cancelDelegate"
            @revokeRefillBack="revokeRefillBack"
            @cc="cc"
            @addSign="addSign"
            @cancelAddSign="cancelAddSign"
            @stop="stop"
            @withdraw="withdraw"
    ></task-change-information-collection>
    </div>

    </div>


    <el-dialog title="打印预览" v-model="isPrintView" style="width:900px"  @close="isPrintView=false" @submit="printCommHander" append-to-body>
        <el-container >
            <iframe :src="printUrl" ref="printIframe" style="width:894px;min-height: 600px"  @load="onIframeLoaded"></iframe>
        </el-container>
        <div slot="footer" class="dialog-footer">
            <el-button @click="isPrintView = false">取消</el-button>
            <el-button type="primary" @click="printCommHander">打印</el-button>
        </div>
    </el-dialog>


</template>


<script>
    import {getDataByFormId, getFormModel, saveData,saveOrders} from "@/framework-admin/api/code/formmodel";
    import AuditDetail from '@/framework-code/flow/auditDetail.vue'
    import TaskChangeInformationCollection from '@/framework-code/flow/taskChangeInformationCollection.vue'
    import request from '@/framework-core/axios';
    import website from '@/framework-core/config/website';
    import router from '@/framework-core/router';
    import apiProc from '@/framework-code/api/proc'
    import {getStore, setStore} from '@/framework-core/utils/store'
    import {
      columnCallApi,
      convertPcComm,
      convertHtmlByParam,
      convertVantMobile,
      getUuid,
      loadAMapScript
    } from '@/framework-core/utils/util'
    import mixCalculator from '@/framework-core/components/design/calculator/mixCalculator';
    import mixFormula from '@/framework-core/components/design/calculator/mixFormula';
    import QrcodeVue from 'qrcode.vue';
    import { downFile,deepClone } from '@smallwei/avue'
    export default {

        mixins: [
            mixCalculator,
            mixFormula
        ],
        components: {
            AuditDetail,
            TaskChangeInformationCollection,
            QrcodeVue
        },
        computed: {

            canSave: function () {
                return !(this.viewFormData.pageKey === 'VIEW');
            },
            isViewPage: function () {
                return this.viewFormData.pageKey === 'VIEW';
            },
            isMobile:function () {
               return  window.isMobile;
            }

        },
        provide() {
            return {
                getViewFormData: () => this.viewFormData.form,
                viewFormData:this.viewFormData
            }
        },
        data() {
            return {
                orderColumn:null,// 预约对象
                columnLinksMap:{},// 关联对象 x:[]
                formulaColumnsMap:{},
                formulaColumns:[],
                qrFormUrl:"",
                printUrl:"",
                isPrintView:false,
                allFromWacthFunc:null,
                columnListMap:{},
                formClass:'form-div-container',
                formId: "",//表单id
                dataId: "",//表单数据id'
                processDefinitionId: "",//流程id
                processInstanceId: "",//流程实例数据
                processDefinitionKey: "",

                // view-form 组件依赖数据
                viewFormData: {
                    // 表单的数据
                    form: {},
                    option: {},

                    // 流程状态详情
                    ProcessState: 'justStart',
                    // 操作类型
                    pageKey: 'DO',

                    keyInfo: {},
                    taskFormPropertyList: [],
                    // 会签控制
                    sign: {
                        // 是否会签模式
                        isSign: false,
                        // 会签数据
                        signData: {}
                    }
                },
                unwatchs: [],
                isGroupIndex: 0,

                // 按钮权限
                buttonAuth: {
                    addTask: {display: false, info: []}, // 加签
                    deleteTask: {display: false, info: []}, // 减签
                    termination: {display: false, info: []}, // 终止
                    revokeRefill: {display: false, info: []}, // 撤回重填
                    revokePreTask: {display: false, info: []}, // 撤回
                    turnTask: {display: false, info: []}, // 转办
                    delegateTask: {display: false, info: []}, // 委派
                    undoDelegateTask: {display: false, info: []} // 取消委派
                },

                // 会签控制器
                signFillUnitInfo: {show: false},

                // 查看审批详情组件信息
                auditDetailInfo: {show: false, processInstanceId: ''},

                // 环节变更数据
                taskChange: {
                    taskChangeInformationCollection: {show: false},
                    choosePerson: false,
                    changeKey: '',
                    changeName: '',
                    maxRows: 1
                },
                // 特殊按钮控制
                specialButtonControl: {
                    execlExport: false, // execl 倒出
                    pdfExport: false // pdf 倒出
                },

                baseButtonInfo: {
                    save: {name: '草稿', display: false,auth: false,click:"saveTemp",  icon:"el-icon-check"},
                    // saveAndSubmit: {name: '保存', display: true,auth: true,click:"handleSubmit",  icon:"el-icon-check"},
                    //  agree: {name: '同意', display: false,auth: true,click:"agreeTask",  icon:"el-icon-check"},
                    // rejectTask: {name: '拒绝', display: false,auth: true,click:"rejectTask",  icon:"el-icon-check"},
                    // returnTask: {name: '退回', display: false,auth: true,click:"returnTask",  icon:"el-icon-check"},

                    auditDetail: {name: '审批详情', display: false,auth: true,click:"getAuditDetail",  icon:"el-icon-check"},
                    turnTask: {name: '转办', display: false,auth: false,click:"turnTask",  icon:"el-icon-check"},
                    delegateTask: {name: '委派', display: false,auth: false,click:"delegateTask",  icon:"el-icon-check"},
                    undoDelegateTask: {name: '取消委派', display: false,auth: true,click:"undoDelegateTask",  icon:"el-icon-check"},
                    addTask: {name: '加签', display: false,auth: false,click:"addTask",  icon:"el-icon-check"},
                    deleteTask: {name: '减签', display: false,auth: false,click:"deleteTask",  icon:"el-icon-check"},
                    termination: {name: '终止', display: false,auth: false,click:"termination",  icon:"el-icon-check"},
                    revokePreTask: {name: '撤回', display: false,auth: false,click:"revokePreTask",  icon:"el-icon-check"},
                    revokeRefill: {name: '撤回重填', display: false,auth: false,click:"revokeRefill",  icon:"el-icon-check"},
                    ccProc: {name: '抄送', display: false,auth: true,click:"ccProc"},
                    printExport: {name: '导出Docx', display: false,auth: true,click:"exportDocFunction",  icon:"el-icon-check"},
                    pdfExport: {name: '导出Pdf', display: false,auth: true,click:"exportPdfFunction",  icon:"el-icon-check"},
                    urgeHandle: {name: '催办', display: false,auth: true,click:"urgeHandle",  icon:"el-icon-check"},
                    printdata: {name: '打印', display: false,auth: true,click:"exportExcelFunction",  icon:"el-icon-check"}
                }
            }

        },
        created() {
          this.getFormInfo();
          this.getButtonAuth();

        },
      mounted() {
        window.addEventListener('beforeunload', e => this.handleBeforeClose(e))
        window.addEventListener('unload', e => this.handleBeforeClose(e))
      },
      beforeDestroy() {
        // 一定要在组件销毁前移除事件监听，避免内存泄露
        window.removeEventListener('beforeunload', e => this.handleBeforeClose(e))
        window.removeEventListener('unload', e => this.handleBeforeClose(e))
      },

        methods: {
          handleBeforeClose(event) {
            // 在这里编写你想在页面关闭前执行的代码
            // 例如：发送数据或者确认提示
            // 设置returnValue以显示浏览器默认的离开确认对话框
            let message = "数据发生变化，是否确定离开";
             event.returnValue = message;
            return "";
          },
            formatDate(date) {
                // 使用全局属性
                return this.$dayjs(date).format("YYYY年MM月DD日 HH:mm");
            },
            beforSubmit(temp){
                //this.$message.error(this.viewFormData.option.beforJs)
                if(! this.viewFormData.option.beforJs){
                    //this.$message.error("没有鉴权")
                    return true;
                }


                var func = new Function('return ' + this.viewFormData.option.beforJs)(); // 将字符串转换成函数
                var $that = this;
                var result = func.apply($that, [this.viewFormData.form]); // 传入参数执行函数
                return result;
            },
            afterSubmit(temp) {
                if(! this.viewFormData.option.afterJs){
                    return true;
                }
                var func = new Function('return ' + this.viewFormData.option.afterJs)(); // 将字符串转换成函数
                var $that = this;
                var result = func.apply($that, [this.viewFormData.form]); // 传入参数执行函数
                return result;
            },

          submitOrder(dataId) {
            if (!this.orderColumn) {
              return
            }
            let orderData = this.viewFormData.form[this.orderColumn.prop];
            if(!orderData || orderData.length==0){
              return;
            }
            let linkdata1 = "";
            let linkdata2 = "";
            let links = this.orderColumn.yuyueLinks;
          //  alert(JSON.stringify(links))
            if (links) {
              if(links.length>0){
                linkdata1 =  this.viewFormData.form[links[0]];
              }
              if(links.length>1){
                linkdata2 =  this.viewFormData.form[links[1]];
              }
            }
            let orderItems = []
            for (let iind=0;iind<orderData.length;iind++) {
              let orderItem = {};
              orderItem.orderCode = this.orderColumn.orderCode;
              orderItem.formDataId = dataId;
              orderItem.rowId = orderData[iind].rowId;
              orderItem.columnId = orderData[iind].columnId;
              orderItem.linkdata1 = linkdata1;
              orderItem.linkdata2 = linkdata2;
              orderItem.dataJson = JSON.stringify({"rowId_text":orderData[iind].rowText,"columnId_text":orderData[iind].columnText})
              orderItems.push(orderItem)
            }
            saveOrders(orderItems);

          },
            initStyles(cssContent){
                let style = document.createElement('style')
                style.type = 'text/css';
                style.innerHTML = cssContent;
                document.head.appendChild(style);
            },

            saveTemp() {
                if(!this.beforSubmit(true)){
                    return;
                }

                this.handleSubmit(this.viewFormData.form,null,'temp');
                this.afterSubmit(true)
                this.$message.success("保存草稿")
            },

            handleSubmit: function (form, done,flg) {
                if(!this.beforSubmit(false)){
                    done();
                    return;
                }
               this.saveComm(form, done,flg);
           },

            saveComm(form, done,flg){
              if (this.processDefinitionKey) {
                form.processDefinitionKey = this.processDefinitionKey;
              }
              saveData(form, {"formId": this.viewFormData.formId})
                  .then((res) => {
                    this.afterSubmit(false);
                    // 保存预约相关信息
                    this.submitOrder(res.data.data.data.id);
                    if( this.viewFormData.keyInfo.processInstanceId || this.viewFormData.keyInfo.taskId){
                      router.push({
                        path: "/form/result",
                        query: {formId: this.viewFormData.formId, dataId: res.data.data.data.id,processInstanceId:this.viewFormData.keyInfo.processInstanceId ,taskId:this.viewFormData.keyInfo.taskId}
                      });
                    }else {
                      router.push({
                        path: "/form/result",
                        query: {formId: this.viewFormData.formId, dataId: res.data.data.data.id, taskId: ""}
                      });
                    }

                  })
                  .catch((err) => {

                    this.$message.error(err.msg || err.message)
                  })
                  .finally(() => {
                    this.loading = true
                    if (done) {
                      done();
                    }
                  })
            },

            /**
             * 初始化表单模型
             */
            getFormInfo() {
              this.viewFormData.print = this.$route.query.print;
              this.viewFormData.formId = this.$route.query.formId
              this.processDefinitionKey = this.$route.query.flowKey
              this.dataId = this.$route.query.dataId
              this.taskId = this.$route.query.taskId;
              this.processInstanceId = this.$route.query.processInstanceId;
              if (this.$route.query.pageKey) {
                this.viewFormData.pageKey = this.$route.query.pageKey;
              }
              if (this.viewFormData.formId) {
                this.loadFormModel(this.viewFormData.formId)
              }

            },

            /**
             * 加载表单模型
             * @param formId
             */
            loadFormModel(formId) {
                getFormModel(formId)
                    .then((res) => {
                        if (res.data) {
                            if (this.dataId) {
                                // 加载表单数据
                                this.loadFormData(this.viewFormData.formId, this.dataId)
                            }
                          if(res.data.data.form.modelJson.indexOf("\"type\":\"map\"")>0) {
                            loadAMapScript();
                          }
                            this.viewFormData.option = eval("(" + res.data.data.form.modelJson + ")") || {};

                             //this.$watermark({text:'avue全局水印'})

                             //this.viewFormData.option.emptyBtn = false;
                             //this.viewFormData.option.submitBtn=false;
                            if(window.isMobile){
                                this.viewFormData.option.bgMargin = 0;
                            }

                            this.initStyles(this.viewFormData.option.gclass );
                            this.viewFormData.dics = res.data.data.dics;
                            this.viewFormData.param = res.data.data.param;
                            this.viewFormData.routeQuerys = JSON.parse(JSON.stringify(this.$route.query))
                            this.processDefinitionId = this.$route.query.flowDataId;
                            this.uploadCommForm();
                            this.commFormBuss();
                            // 加载流程模型及数据
                            this.loadFlowModelAndData();

                            // 计算
                            if (this.isCalculated()) {
                                setTimeout(() => {
                                    //初始加载计算公式时，modelData数据不完整，会导致报错；使用setTimeout等待modelData数据加载完成
                                    this.initData();
                                    this.initDynamic();
                                }, 500);
                            }
                            this.initDynamicStyle();


                            convertVantMobile(this.viewFormData.option,!!this.viewFormData.print);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err.msg || err.message)
                    })
                    .finally(() => {
                        this.loading = true
                    })
            },

            /**
             *  加载表单模型填充数据
             * */
            uploadCommForm() {
                this.viewFormData?.option?.column.forEach((column) => {
                    this.uploadCommFormColumn(column);
                });
                if (this.viewFormData?.option?.group) {
                    this.viewFormData.option.group.forEach((groupItem) => {
                        if (groupItem.column) {
                            groupItem.column.forEach((column22) => {
                                this.uploadCommFormColumn(column22);
                            });
                        }
                    });
                }

            },
            uploadCommFormColumn(column) {

              if (column.type == 'upload') {
                if (!column.action) {
                  column.action = website.baseUrl + "/api/sys/file/upload"
                }
                if (!column.propsHttp || column.action.indexOf("/api/sys/file/upload") >= 0) {
                  column.propsHttp = {
                    url: 'url',
                    name: 'originalFilename',
                    res: 'data.data'
                  };
                }
                if (!column.cropperOption || column.action.indexOf("/api/sys/file/upload") >= 0) {
                  // column.cropperOption = {
                  //     autoCropWidth: 100,
                  //     autoCropHeight: 100,
                  //     fixed: true,
                  //     fixedNumber: [100, 100],
                  // }
                }
                if (!column.listType) {
                  column.listType = 'picture-img';
                }
                switch (column.listType) {
                  case "text":
                    if (!column.dataType) {
                      column.dataType = "json"
                      column.props = {
                        label: 'originalFilename',
                        value: 'url'
                      }
                    }
                    break;
                  case "picture-card":
                    break;
                  case "picture-img":
                    break;
                  case "picture":
                    break;
                }

              } else if (column.dicCode) {
                column.dicData = this.$dictObject[column.dicCode];
                if (!column.dicData) {
                  // TODO 第三方字典
                  column.dicData = this.viewFormData.dics[column.dicCode];
                }
              }

              if (column.sysParam) {
                column.disabled = true;
                if (this.viewFormData.param) {
                  let content = convertHtmlByParam(column.sysParam, null, null, this.viewFormData.param)
                  this.viewFormData.form[column.prop] = content;
                }

              }
              if (column.value) {
                if (column.value.indexOf("{") >= 0) {
                  let content = convertHtmlByParam(column.value, this.viewFormData.form, this.$route.query, this.viewFormData.param)
                  this.viewFormData.form[column.prop] = content;
                  //column.disabled = true;
                } else {
                  this.viewFormData.form[column.prop] = column.value
                }
              }
              if (column.formula) {
                this.formulaColumns.push(column.prop)
                // column.getResult();
                column.disabled = true;
                this.viewFormData.form[column.prop] = this.getFormulaResult(column, this.viewFormData);
              }
            },

            // 加载表单数据
            loadFormData(formId, dataId) {
                getDataByFormId(formId, dataId)
                    .then((res) => {
                        this.viewFormData.form = res.data.data.data;
                    })
                    .catch((err) => {
                        this.$message.error(err.msg || err.message)
                    })
                    .finally(() => {
                        this.loading = true
                    })
            },




            /**
             * 加载流程模型及数据
             */
            loadFlowModelAndData() {

              if(!this.viewFormData.form.processInstanceId && this.processInstanceId){
                this.viewFormData.form.processInstanceId = this.processInstanceId;
              }
              if(!this.viewFormData.form.taskId && this.taskId){
                this.viewFormData.form.taskId = this.taskId;
              }

              if (this.taskId || this.processDefinitionKey) {
                this.baseButtonInfo.auditDetail.display = true;
              }
              if (this.viewFormData.pageKey && this.viewFormData.pageKey == "VIEW") {

                this.viewFormData.option.detail = true;
                this.viewFormData.option.submitBtn = false;
                this.viewFormData.option.emptyBtn = false;
                this.viewFormData.option.printCommBtn = true;
                this.viewFormData.print = false;

              } else {

                if (this.processDefinitionKey && this.viewFormData.pageKey == "APPLY") {
                  this.loadFlowSart()
                }
                // 加载
                if (this.taskId) {
                  this.getToDoTaskDescriptionByTask(this.dataId, this.taskId, (ToDoTaskDescription) => {

                    if (
                        ToDoTaskDescription &&
                        Array.isArray(ToDoTaskDescription.formKeyList) &&
                        ToDoTaskDescription.formKeyList.length > 0
                    ) {
                      /** 判断是否会签模式 */
                      if (ToDoTaskDescription.formKeyList.length > 1) {
                        // 会签模式
                        this.viewFormData.sign.isSign = true;
                        this.viewFormData.sign.signData =
                            ToDoTaskDescription;
                      } else {
                        // 非会签模式
                        this.viewFormData.sign.isSign = false;
                      }

                      // 主表的表单模型,无论会签、非会签  都只考虑主表受流程字段控制。
                      // let formModelJson =
                      //     ToDoTaskDescription.formModelJsonList[0];
                      // this.viewFormData.options = formModelJson;
                      this.viewFormData.editMode = ToDoTaskDescription.editMode;
                      this.viewFormData.processDefinitionId = ToDoTaskDescription.processDefinitionId;
                      this.viewFormData.taskDefinitionKey = ToDoTaskDescription.taskDefinitionKey;
                      // this.viewFormData.pageKey = 'DO';
                      // this.viewFormData.ProcessState = 'ongoing';
                      this.viewFormData.keyInfo = {
                        processInstanceId: ToDoTaskDescription.processInstanceId,
                        formId: this.viewFormData.formId,
                        taskId: this.taskId,
                        businessKey: this.dataId
                      };
                      this.viewFormData.taskFormPropertyList = ToDoTaskDescription.taskFormPropertyList;
                      this.showBtns(ToDoTaskDescription.formModelJsonList[0].extButtonList, this.viewFormData.taskFormPropertyList);
                      this.commFlowBuss();

                    } else {
                      this.$message.error(
                          '流程异常: 获取到的表单ID(formKeyList)异常。'
                      );
                    }

                  })
                } else if (this.processInstanceId) {

                } else if (this.processDefinitionKey) {
                  //this.loadFlowModel()
                } else {

                }
              }
            },

            showBtns(expBtnList,btnList) {

              if (this.viewFormData.editMode != "application" || this.viewFormData.pageKey == 'VIEW') {
                this.viewFormData.option.emptyBtn = false;
                this.viewFormData.option.submitBtn = false;
              }
              //alert(this.viewFormData.editMode)
              if (btnList) {
                for (let index = 0; index < btnList.length; index++) {
                  let btn = btnList[index];
                  if (btn.id && btn.id.indexOf("button.") >= 0) {
                    let b = this.baseButtonInfo[btn.prop];
                    if (b) {
                      b.display = true;
                    }

                  }

                }
              }

              if (expBtnList) {
                for (let index = 0; index < expBtnList.length; index++) {
                  let btn = expBtnList[index];
                  this.baseButtonInfo[btn.prop] = {
                    name: btn.name,
                    display: true,
                    auth: true,
                    click: btn.onClick + "",
                    info: btn,
                    icon: btn.buttonStyleType
                  };
                }
              }
            },

            // 启动申请
            async loadFlowSart() {
                try {
                    const response = await apiProc.apiProcStart(this.processDefinitionKey, this.dataId);
                    let {
                        processInstanceId,
                        taskId,
                        formKeyList,
                        taskFormPropertyList,
                        businessKey,
                        editMode,
                        processCode,
                        taskDefinitionKey
                    } = response.data.data.data;
                    if (formKeyList.length) {
                        let keyInfo = {
                            processInstanceId,
                            taskId,
                            processCode,
                            businessKey,
                            formId: this.viewFormData.formId
                        }
                        this.viewFormData.form.processCode = processCode;
                        this.viewFormData.form.processInstanceId = processInstanceId;
                        this.viewFormData.form.taskId = taskId;
                        this.viewFormData.form.businessKey = businessKey;
                        this.viewFormData.form.formId = this.viewFormData.formId;
                        this.viewFormData.pageKey = 'DO';
                        this.viewFormData.keyInfo = keyInfo;
                        this.viewFormData.editMode = editMode;
                        this.viewFormData.taskDefinitionKey = taskDefinitionKey;
                        this.viewFormData.taskFormPropertyList = taskFormPropertyList;
                        this.commFlowBuss();
                    }
                } catch ({msg}) {
                    this.$message.error(msg)
                }
            },

            commFormBuss() {
                // 表单分组
                this.loadGroup();
                // 监听
                this.dynamicWatchs();

              // 公式
              if(this.formulaColumns && this.formulaColumns.length>0){
                for (let formulaIndex in this.formulaColumns) {
                  let formulaProp = this.formulaColumns[formulaIndex]
                  let $column = this.columnListMap[formulaProp];
                  for (let kProp in this.columnListMap) {
                    if(kProp == formulaProp){
                      continue
                    }
                    if ($column.formula.indexOf(kProp) >= 0) {
                      let temps = this.formulaColumnsMap[kProp];
                      if(!temps){
                        temps = [];
                        temps.push(formulaProp)
                      }
                      this.formulaColumnsMap[kProp] = temps;

                      this.dynamicWatch(kProp, (newVal, oldVal, dataPath) => {
                        let temps = this.formulaColumnsMap[kProp];
                        for (let kIndex in temps) {
                          let $columnTemp = this.columnListMap[temps[kIndex]];
                          this.viewFormData.form[temps[kIndex]] = this.getFormulaResult($columnTemp, this.viewFormData);
                        }

                      });
                    }
                  }
                }
              }

            },

            // 申请、审批等公用逻辑
            commFlowBuss() {
                // 根据流程表单元素的属性改变现实表单的属性（如：只读等）
                this.changeFormModelUsingTaskForm(this.viewFormData.option, this.viewFormData.taskFormPropertyList);
                if (this.viewFormData.option.group) {
                    this.viewFormData.option.group.forEach((groupItem) => {
                        this.changeFormModelUsingTaskForm(groupItem, this.viewFormData.taskFormPropertyList);
                    });
                }
            },



            /**
             * 根据数据ID,任务ID获得待办任务的描述
             * @param {String} businessKey   数据ID
             * @param {String} processInstanceId   任务实例ID
             */
            getToByProcessInstance(businessKey, processInstanceId, callback) {

            },

            /**
             * 根据数据ID,任务ID获得待办任务的描述
             * @param {String} businessKey   数据ID
             * @param {String} taskId   任务ID
             */
            getToDoTaskDescriptionByTask(businessKey, taskId, callback) {
                if(!taskId){
                    return
                }
                request.get(website.baseCodeApiUrl + '/api/flow/flow-ext/todo-task-description',
                    {params: {businessKey, taskId}
                    }
                )
                    .then((response) => {
                        callback(response.data.data.data);
                        this.viewFormData.pageKey = 'DO';
                        this.viewFormData.ProcessState = 'ongoing';
                    })
                    .catch((error) => {
                        this.pageKey = 'VIEW';
                        this.getToByProcessInstance(businessKey, "", callback);
                    });
            },




            /**
             * 保存并提交后
             */
            goToSuccess() {
                let submitSuccessPrompt = this.getSuccessPrompt('submitSuccessPrompt');
                const {routeType} = this.$route.query;
                let query = {
                    processInstanceId: this.viewFormData.keyInfo.processInstanceId,
                    businessKey: this.viewFormData.keyInfo.businessKey,
                    submitSuccessPrompt: submitSuccessPrompt,
                    isIframe: this.$route.query.isIframe,
                    routeType: routeType
                };
                if (this.$route?.query?.appId) {
                    query.appId = this.$route.query.appId;
                }
                let nextRouterPath =
                    routeType === 'page' ? '/api/flow/workflow/page/complete' : '/api/flow/workflow/complete';

                this.$router.push({
                    path: nextRouterPath,
                    query: query
                });
            },
            goToSuccess2(businessKey) {
                const {toNext, formId, routeType} =
                    this.$route.query;
                if (toNext === 'true') {
                    let nextRouterPath =
                        routeType === 'page'
                            ? '/api/flow/workflow/page/complete2'
                            : '/api/flow/workflow/complete2';
                    this.$router.push({
                        path: nextRouterPath,
                        query: {
                            toNext,
                            formId,
                            businessKey,
                            routeType,

                        }
                    });
                }
            },
            // toSign() {
            //     this.signFillUnitInfo.show = true;
            //     this.$refs.signFill.getFormEvent();
            // },
            // signSubmit(data, formId, done, errorDone) {
            //     request
            //         .post(website.baseCodeApiUrl +
            //             `/form-instance/sign-save?isSubmitProcess=true&formId=${formId}&procDefId=${this.processDefinitionId}`,
            //             data
            //         )
            //         .then((response) => {
            //             request
            //                 .post(website.baseCodeApiUrl +
            //                     `/flow-ext/do-task?taskId=${this.viewFormData.keyInfo.taskId}`,
            //                     response.data
            //                 )
            //                 .then(() => {
            //                     this.$message.success('会签成功！');
            //                     this.goToSuccess();
            //                     done();
            //                 })
            //                 .catch((error) => {
            //                     errorDone();
            //                     // this.$message.error(error.msg || error.message)
            //                 });
            //         })
            //         .catch((error) => {
            //             errorDone();
            //             // this.$message.error(error.msg || error.message)
            //         });
            // },

            /**
             * @auth ZHJI
             * 获取按钮的权限
             */
            getButtonAuth() {
                let url;
                if ( this.taskId) {
                    url = `/api/flow/flow-task-change/do-task-form-button-authority?taskId=${this.taskId}`;
                } else if (this.processInstanceId) {
                    url = `/api/flow/flow-task-change/view-form-button-authority?processInstanceId=${this.processInstanceId}`;
                }
                if (url) {
                    request.get(website.baseCodeApiUrl + url)
                        .then((response) => {
                            var buttonAuth = response.data.data.data;
                            if(buttonAuth) {

                                for(var item in buttonAuth){
                                    this.baseButtonInfo[item].display = buttonAuth[item].display;
                                    this.baseButtonInfo[item].auth = buttonAuth[item].display;
                                    this.baseButtonInfo[item].info = buttonAuth[item].info;
                                }

                            }

                        })
                        .catch((error) => {
                            this.$message.error(error.msg || error.message)
                        });
                }
            },


            // 执行
            runTask(btn){
                if(btn.click){
                    this[btn.click](btn);
                }
            },

            todoTask(){
                  alert("todoTask");
            },

          submit(btn) {
            let form = deepClone(this.viewFormData.form);
            form.extButtonParam = btn.info;
            form.processInstanceId = this.processInstanceId;
            form.taskId = this.taskId;
            this.saveComm(form, null, null);
          },



            /**
             * @auth ZHJI
             * 查看流程审批详情
             */
            getAuditDetail() {
              //this.auditDetailInfo.businessKey = this.viewFormData.form.businessKey;
              this.auditDetailInfo.formId = this.viewFormData.option.formId;
              this.auditDetailInfo.processInstanceId = this.viewFormData.form.processInstanceId;
              //this.auditDetailInfo.processDefinitionKey = this.processDefinitionKey;

              this.auditDetailInfo.show = true;
              // alert(this.auditDetailInfo.processInstanceId)

            },
            // 取消委派 , 只需要收集原因
            undoDelegateTask() {
                this.taskChange.choosePerson = false;
                this.taskChange.changeKey = 'cancelDelegate';
                this.taskChange.changeName = '取消委派';
                this.taskChange.maxRows = 1;
                this.taskChange.taskChangeInformationCollection.show = true;
            },
            ccProc() {
                // 抄送流程
                this.taskChange.choosePerson = true;
                this.taskChange.changeKey = 'cc';
                this.taskChange.changeName = '抄送';
                this.taskChange.maxRows = 50;
                this.taskChange.taskChangeInformationCollection.show = true;
            },
            // 取消委派回调函数
            cancelDelegate(data, done, errorDone) {
                request.delete(
                    website.baseCodeApiUrl +
                    '/api/flow/flow-task-change/undo-delegate-task',
                    {
                        params: {
                            taskId: this.viewFormData.keyInfo.taskId,
                            undoDelegateTaskReason: data.reason
                        }
                    }
                )
                    .then((response) => {
                        this.$message.success(response.msg);
                        done();
                        this.getButtonAuth();
                    })
                    .catch((error) => {
                        errorDone();
                        this.$message.error(error.msg || error.message);
                    });
            },
            // 委派
            delegateTask() {
                this.taskChange.choosePerson = true;
                this.taskChange.changeKey = 'delegate';
                this.taskChange.changeName = '委派';
                this.taskChange.maxRows = 1;
                this.taskChange.taskChangeInformationCollection.show = true;
            },
            // 委派回调函数
            delegate(data, done, errorDone) {
                request
                    .post(
                        website.baseCodeApiUrl + '/api/flow/flow-task-change/delegate-task',
                        null,
                        {
                            params: {
                                taskId: this.viewFormData.keyInfo.taskId,
                                acceptUserId: data.acceptUser[0].id,
                                delegateTaskReason: data.reason
                            }
                        }
                    )
                    .then((response) => {
                        this.$message.success(response.msg);
                        done();
                        this.getButtonAuth();
                    })
                    .catch((error) => {
                        errorDone();
                        this.$message.error(error.msg || error.message);
                    });
            },
            // 转办流程 转办后自己将不会托管 需要选择人
            turnTask() {
                this.taskChange.choosePerson = true;
                this.taskChange.changeKey = 'transferTransact';
                this.taskChange.changeName = '转办';
                this.taskChange.maxRows = 1;
                this.taskChange.taskChangeInformationCollection.show = true;
            },
            // 转办回调函数
            transferTransact(data, done, errorDone) {
                request
                    .put(
                        website.baseCodeApiUrl + '/api/flow/flow-task-change/turn-task',
                        null,
                        {
                            params: {
                                taskId: this.viewFormData.keyInfo.taskId,
                                acceptUserId: data.acceptUser[0].id,
                                turnTaskReason: data.reason
                            }
                        }
                    )
                    .then((response) => {
                        this.$message.success(response.msg);
                        done();
                        this.getButtonAuth();
                    })
                    .catch((error) => {
                        errorDone();
                        this.$message.error(error.msg || error.message);
                    });
            },
            // 加签
            addTask() {
                this.taskChange.choosePerson = true;
                this.taskChange.changeKey = 'addSign';
                this.taskChange.changeName = '加签';
                this.taskChange.maxRows = 1;
                this.taskChange.taskChangeInformationCollection.show = true;
            },
            // 加签回调函数
            addSign(data, done, errorDone) {
                request
                    .post(
                        website.baseCodeApiUrl + '/api/flow/flow-task-change/add-task',
                        null,
                        {
                            params: {
                                processInstanceId: this.viewFormData.keyInfo.processInstanceId,
                                acceptUserId: data.acceptUser[0].id,
                                taskDefKey: this.buttonAuth.addTask.info,
                                addTaskReason: data.reason
                            }
                        }
                    )
                    .then((response) => {
                        this.$message.success(response.msg);
                        done();
                        this.getButtonAuth();
                    })
                    .catch((error) => {
                        errorDone();
                        this.$message.error(error.msg || error.message);
                    });
            },
            // 减签
            deleteTask() {
                const loading = this.$loading({
                    lock: true,
                    text: '减签环节加载中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(144, 146, 152, 0.3)'
                });
                request
                    .get(
                        website.baseCodeApiUrl +
                        '/api/flow/flow-task-change/delete-task-list',
                        {
                            params: {
                                processInstanceId: this.viewFormData.keyInfo.processInstanceId,
                                taskDefKey: this.buttonAuth.deleteTask.info
                            }
                        }
                    )
                    .then((response) => {
                        loading.close();
                        this.taskChange.taskChangeInformationCollection.userArray =
                            response.data;
                        this.taskChange.choosePerson = true;
                        this.taskChange.changeKey = 'cancelAddSign';
                        this.taskChange.changeName = '减签';
                        this.taskChange.maxRows = 1;
                        this.taskChange.taskChangeInformationCollection.show = true;
                    })
                    .catch((error) => {
                        loading.close();
                        this.$message.error(error.msg || error.message);
                    });
            },
            // 减签回调函数
            cancelAddSign(data, done, errorDone) {
                request
                    .delete(
                        website.baseCodeApiUrl + '/api/flow/flow-task-change/delete-task',
                        {
                            params: {
                                taskId: data.acceptUser,
                                deleteTaskReason: data.reason
                            }
                        }
                    )
                    .then((response) => {
                        this.$message.success(response.msg);
                        done();
                        this.getButtonAuth();
                    })
                    .catch((error) => {
                        errorDone();
                        this.$message.error(error.msg || error.message);
                    });
            },
            // 终止流程
            termination() {
                this.taskChange.choosePerson = false;
                this.taskChange.changeKey = 'stop';
                this.taskChange.changeName = '终止申请';
                this.taskChange.maxRows = 1;
                this.taskChange.taskChangeInformationCollection.show = true;
            },
            // 终止流程回调函数
            stop(data, done, errorDone) {
                request.delete(website.baseCodeApiUrl + '/api/flow/flow-task-change/delete-process-instance',
                        {
                            params: {
                                processInstanceId: this.viewFormData.keyInfo.processInstanceId,
                                deleteReason: data.reason
                            }
                        }
                    )
                    .then((response) => {
                        this.$message.success('终止' + response.msg);
                        done();
                        this.getButtonAuth();
                    })
                    .catch((error) => {
                        errorDone();
                        this.$message.error(error.msg || error.message);
                    });
            },
            // 撤回
            revokePreTask() {
                this.taskChange.choosePerson = false;
                this.taskChange.changeKey = 'withdraw';
                let ruTaskInfo = this.buttonAuth.revokePreTask.info.ruTaskInfo
                    .map((item) => item.taskName)
                    .toString();
                let preTaskInfo = this.buttonAuth.revokePreTask.info.preTaskInfo
                    .map((item) => item.taskName)
                    .toString();
                this.taskChange.changeName = `从 ${ruTaskInfo} 撤回到 ${preTaskInfo}`;
                this.taskChange.taskChangeInformationCollection.labelName = '撤回';
                // 撤回的时候 拼接标题
                this.taskChange.maxRows = 1;
                this.taskChange.taskChangeInformationCollection.show = true;
            },
            // 撤回重填
            revokeRefill() {
                this.taskChange.choosePerson = false;
                this.taskChange.changeKey = 'revokeRefillBack';
                // let ruTaskInfo = this.buttonAuth.revokePreTask.info.ruTaskInfo.map(item => item.taskName).toString()
                // let preTaskInfo = this.buttonAuth.revokePreTask.info.preTaskInfo.map(item => item.taskName).toString()
                this.taskChange.changeName = `撤回重填`;
                this.taskChange.taskChangeInformationCollection.labelName = '撤回';
                // 撤回的时候 拼接标题
                this.taskChange.maxRows = 1;
                this.taskChange.taskChangeInformationCollection.show = true;
            },
            // 撤回重填回调函数
            revokeRefillBack(data, done, errorDone) {
                console.log('撤回重填');
                if (this.viewFormData.keyInfo.processInstanceId) {
                    request
                        .get(
                            website.baseCodeApiUrl + '/api/flow/flow-task-change/revoke-refill',
                            {
                                params: {
                                    processInstanceId: this.viewFormData.keyInfo.processInstanceId,
                                    revokePreTaskReason: data.reason
                                }
                            }
                        )
                        .then((response) => {
                            if (response.code === 200) {
                                request
                                    .get(
                                        website.baseCodeApiUrl +
                                        '/api/flow/flow-ext/my-todo-and-wait-me-claim',
                                        {
                                            params: {
                                                pageNum: 1,
                                                pageSize: 1,
                                                processInstanceId:
                                                this.viewFormData.keyInfo.processInstanceId
                                            }
                                        }
                                    )
                                    .then((response) => {
                                        if (
                                            response.data.records &&
                                            response.data.records.length >= 1
                                        ) {
                                            let row = response.data.records[0];
                                            this.$router.push({
                                                name: 'workFlow-view-myApply',
                                                query: {
                                                    businessKey: row.businessKey,
                                                    processInstanceId: row.processInstanceId,
                                                    taskId: row.taskId,
                                                    formId: row.taskFormKey[0],
                                                    pageKey: 'DO'
                                                }
                                            });
                                            this.$message.success(response.msg);
                                            done();
                                        } else {
                                            this.$message.success(response.msg);
                                            done();
                                            this.getButtonAuth();
                                        }
                                        // 没有代办任务了, 返回主页, 查看详情
                                    });
                            } else {
                                this.$message.success(response.msg);
                                done();
                            }
                        })
                        .catch((error) => {
                            errorDone();
                            // this.$message.error(error.msg || error.message)
                        });
                }
            },
            // 撤回回调函数
            withdraw(data, done, errorDone) {
                console.log('撤回');
                if (
                    this.viewFormData.keyInfo.processInstanceId &&
                    this.buttonAuth.revokePreTask.info
                ) {
                    request
                        .post(
                            website.baseCodeApiUrl +
                            '/api/flow/flow-task-change/revoke-per-task',
                            this.buttonAuth.revokePreTask.info,
                            {
                                params: {
                                    processInstanceId: this.viewFormData.keyInfo.processInstanceId,
                                    revokePreTaskReason: data.reason
                                }
                            }
                        )
                        .then((response) => {
                            if (response.code === 200) {
                                request
                                    .get(
                                        website.baseCodeApiUrl +
                                        '/api/flow/flow-ext/my-todo-and-wait-me-claim',
                                        {
                                            params: {
                                                pageNum: 1,
                                                pageSize: 1,
                                                processInstanceId:
                                                this.viewFormData.keyInfo.processInstanceId
                                            }
                                        }
                                    )
                                    .then((response) => {
                                        if (
                                            response.data.records &&
                                            response.data.records.length >= 1
                                        ) {
                                            let row = response.data.records[0];
                                            this.$router.push({
                                                name: 'workFlow-view-myApply',
                                                query: {
                                                    businessKey: row.businessKey,
                                                    processInstanceId: row.processInstanceId,
                                                    taskId: row.taskId,
                                                    formId: row.taskFormKey[0],
                                                    pageKey: 'DO'
                                                }
                                            });
                                            this.$message.success(response.msg);
                                            done();
                                        } else {
                                            this.$message.success(response.msg);
                                            done();
                                            this.getButtonAuth();
                                        }
                                        // 没有代办任务了, 返回主页, 查看详情
                                    });
                            } else {
                                this.$message.success(response.msg);
                                done();
                            }
                        })
                        .catch((error) => {
                            errorDone();
                            // this.$message.error(error.msg || error.message)
                        });
                }
            },
            // 抄送回调函数
            cc(data, done, errorDone) {
                let userIdList = [];
                data.acceptUser.forEach((item) => {
                    userIdList.push(item.id);
                });
                request.post(website.baseCodeApiUrl + '/api/flow/flow-cc-proc/to-users', userIdList,
                        {
                            params: {
                                reCC: false,
                                processInstanceId: this.viewFormData.keyInfo.processInstanceId
                            }
                        }
                    )
                    .then((response) => {
                        this.$message.success(response.msg);
                        done();
                    })
                    .catch((error) => {
                        errorDone();
                        this.$message.error(error.msg || error.message);
                    });
            },


            urgeHandle() {
                // 催办
                request.get(
                        website.baseCodeApiUrl +
                        '/api/flow/urge-handle/' +
                        this.viewFormData.form.processInstanceId
                    )
                    .then((res) => {
                        this.$message.success(res.msg);
                    })
                    .catch((e) => {
                        this.$alert(e.msg || e.message, '错误', {
                            confirmButtonText: '确定',
                            type: 'error'
                        });
                    });
            },

            exportDocFunction() {
                this.downFile(website.baseCodeApiUrl + "/api/form/formData/print?formId=" + this.viewFormData.formId + "&id=" + this.dataId + "&jrtoken=" + getStore({name: 'token'}), this.viewFormData.name + ".doc");
            },

            printCommHander(){
                //this.$Print(document.querySelector('.formPreview'));
                //const iframe = this.$el.querySelector('iframe');
                //iframe.$el.contentWindow.print()
                let iframe =this.$refs.printIframe;
                let printWindow = iframe.contentWindow || iframe;
                printWindow.focus();
                printWindow.print();
                this.dialogVisible = false;

            },

            onIframeLoaded(){
                // const iframe = this.$el.querySelector('iframe');
                // iframe.contentWindow.print();
            },

            printCommHanderPreview() {
                this.isPrintView = true;
                this.qrFormUrl = window.location;
                this.printUrl = this.qrFormUrl + "&print=1";
            },


            exportPdfFunction(){
                this.canExport("pdf");
            },

            exportExcelFunction(){
                this.canExport("excel");
            },

            /**
             * 是否 execl导出
             */
            canExport(type) {
                /** 有数据id才能导出 */
                if (
                    this.viewFormData.keyInfo.businessKey &&
                    (('execl' == type &&
                        Array.isArray(this.viewFormData.options['templatePathFileList']) &&
                        this.option['templatePathFileList'].length) ||
                        'pdf' == type)
                ) {
                    let exportType = this.viewFormData.option[`${type}Export`];
                    let exportConditions =
                        this.option[`${type}ExportConditions`];
                    if (exportType === 'notLimit') {
                        return true;
                    } else if (exportType === 'never') {
                        return false;
                    } else if (exportType === 'ongoing') {
                        // TODO 判断是否进行中
                        if (this.ProcessState === 'ongoing') return true;
                    } else if (exportType === 'completed') {
                        // TODO 判断是否已完成
                        if (this.ProcessState === 'completed') return true;
                    } else if (exportType === 'custom') {
                        try {
                            if (exportConditions) {
                                let replaceKey = exportConditions.match(/\${.*?}/g);
                                if (Array.isArray(replaceKey) && replaceKey.length) {
                                    replaceKey.forEach((item) => {
                                        let propKey = item.substring(2, item.length - 1);
                                        exportConditions = exportConditions.replace(
                                            item,
                                            `'${this.viewFormData.form[propKey]}'`
                                        );
                                    });
                                }
                                /* eslint-disable */
                                if (eval(exportConditions)) {
                                    return true;
                                }
                                /* eslint-enable */
                            }
                        } catch (error) {
                            console.error(`流程${type}下载自定义条件表达式出错`);
                        }
                    }
                }
                return false;
            },


            // 表单分组
            loadGroup() {
                if (this.viewFormData.option.isGroup) {
                   // this.showGroup();
                }
            },
            // // 点击步骤条
            // handleStep(val) {
            //     this.isGroupIndex = val;
            //     this.showGroup();
            // },
            // // 点击显示分组
            // showGroup() {
            //     if (this.viewFormData.option && this.viewFormData.option.group && this.viewFormData.option.group.length > 0) {
            //         for (var iindex = 0; iindex < this.viewFormData.option.group.length; iindex++) {
            //             var ge = this.viewFormData.option.group[iindex];
            //             ge.display = this.isGroupIndex == iindex;
            //         }
            //     }
            // },

            /**
             * 设置流程属性
             * @param formModelJson
             * @param taskFormJson
             */
            changeFormModelUsingTaskForm(formModelJson, taskFormJson) {
                var taskMap = {};
                for (var jn = 0; jn < taskFormJson.length; jn++) {
                    taskMap[taskFormJson[jn].id] = taskFormJson[jn];
                }
                // 对从后端返回的表单模型数据做改变
                for (let i = 0; i < formModelJson.column.length; i++) {
                    let formModelObj = formModelJson.column[i];
                    if (formModelObj.display === false) continue;
                    let taskObj = taskMap[formModelObj.prop];
                    if (!taskObj) {
                        formModelObj.display = false
                        continue
                    }
                    if (taskObj.required) {
                        formModelObj.required = true;
                    }
                    if (taskObj.readable && !taskObj.writable) {
                        formModelObj.disabled = true;
                    }
                }
            },

            // 表单监听事件集合
            dynamicWatchs() {
                this.allFromWacthFunc = new Function('return ' + this.viewFormData.option.allJs)();
                if( this.viewFormData.option &&  this.viewFormData.option.allJs) {
                    this.$watch('viewFormData.form', (newValue, oldValue) => {
                        // alert(JSON.stringify(newValue));
                        //console.log(`message changed from ${oldValue} to ${newValue}`);
                        //var func = new Function('return ' + this.viewFormData.option.allJs)(); // 将字符串转换成函数
                        var $that = this;
                        if( $that.allFromWacthFunc) {
                            $that.allFromWacthFunc.apply($that, [this.viewFormData.form]); // 传入参数执行函数
                        }
                    }, {
                        immediate: false,
                        deep: true
                    });
                }
                this.columnListMap = {};
                var cascaderList = [];
                if (this.viewFormData.option && this.viewFormData.option.column && this.viewFormData.option.column.length > 0) {
                    for (let iindex = 0; iindex < this.viewFormData.option.column.length; iindex++) {
                      let $column = this.viewFormData.option.column[iindex];
                        this.columnListMap[$column.prop] = $column;
                        if($column.type == "cascader" || $column.type == "select"){
                            cascaderList.push($column.prop)
                        }
                        if($column.type == "yuyueform") {
                          this.orderColumn = $column;
                        }
                        this.dynamicWatchColumn($column);
                    }
                }
                if (this.viewFormData.option && this.viewFormData.option.group && this.viewFormData.option.group.length > 0) {
                  for (var iindex = 0; iindex < this.viewFormData.option.group.length; iindex++) {
                    var $group = this.viewFormData.option.group[iindex];
                    for (var jindex = 0; jindex < $group.column.length; jindex++) {
                      var $column = $group.column[jindex];
                      this.columnListMap[$column.prop] = $column;
                      if ($column.type == "cascader" || $column.type == "select") {
                        cascaderList.push($column.prop)
                      }
                      if ($column.type == "yuyueform") {
                        this.orderColumn = $column;
                      }
                      this.dynamicWatchColumn($column);
                    }
                  }
                }
              this.viewFormData.columnListMap =this.columnListMap;
                // 移动端级联
                for (var iindex = 0; iindex < cascaderList.length; iindex++) {
                    var $column = this.columnListMap[cascaderList[iindex]];
                    if($column.cascader) {
                        for (var jindex = 0; jindex < $column.cascader.length; jindex++) {
                            var $columnc = this.columnListMap[$column.cascader[jindex]];
                          if($columnc){
                            $columnc.parentProp = $column.prop
                          }
                        }
                    }
                }

            },

            dynamicWatchColumn($column,isGroup) {
              if (!$column.dynamicEventData || $column.dynamicEventData.length==0) {
                return
              }
              // 使用dynamicWatch函数来监控数据
              this.dynamicWatch($column.prop, (newVal, oldVal, dataPath) => {

                let dynamicEventDatas = this.columnListMap[dataPath].dynamicEventData;
                if (dynamicEventDatas) {
                  for (let dindex = 0; dindex < dynamicEventDatas.length; dindex++) {
                    let columnTemp = dynamicEventDatas[dindex];
                    let linkList = columnTemp.links
                    for (let yindex = 0; yindex < linkList.length; yindex++) {
                      let columnLink = this.columnListMap[linkList[yindex]];

                      let tempLinks = this.columnLinksMap[columnLink.prop];
                      if (!tempLinks) {
                        tempLinks = []
                      }
                      tempLinks.push(dataPath);

                      this.columnLinksMap[columnLink.prop] = tempLinks
                      // 1显,2隐,3编辑，4只读,5 加载数据 6 赋值

                      //alert(columnTemp.linksEvent)
                      if (columnTemp.linksEvent === "1" || columnTemp.linksEvent === "2" || columnTemp.linksEvent === "3" || columnTemp.linksEvent === "4") {
                        let op = columnTemp.linksEventRule.indexOf(">") >= 0 || columnTemp.linksEventRule.indexOf("<") >= 0 || columnTemp.linksEventRule.indexOf("==") >= 0;
                        //alert(op+newVal+columnTemp.linksEventRule +":"+newVal+columnTemp.linksEventRule);
                        if ((!op && newVal == columnTemp.linksEventRule) || (op && eval('"' + newVal + '"' + columnTemp.linksEventRule))) {
                          switch (columnTemp.linksEvent) {
                            case "1":
                              columnLink.display = true;
                              break;
                            case "2":
                              columnLink.display = false;
                              break;
                            case "3":
                              columnLink.disabled = false;
                              break;
                            case "4":
                              columnLink.disabled = true;
                              break;
                          }
                        }
                        // columnLink.hide = newVal == columnTemp.linksEventRule;
                      }
                      // 数据加载
                      else if (columnTemp.linksEvent === "5") {
                        //this.viewFormData.form[columnLink.prop] = "";
                        convertPcComm(columnLink);
                        columnLink.reloadDataFlg = getUuid()
                      }
                      // 数据赋值
                      else if (columnTemp.linksEvent === "6") {
                        columnLink.disabled = true;
                        // alert(columnTemp.linksEventRule)
                        if (columnTemp.linksEventRule) {
                          let content = convertHtmlByParam(columnTemp.linksEventRule, this.viewFormData.form, this.$route.query, this.viewFormData.param)
                          this.viewFormData.form[columnLink.prop] = content;
                        } else {
                          this.viewFormData.form[columnLink.prop] = this.viewFormData.form[dataPath];

                        }
                      }
                    }

                  }
                }

                //console.log(`${dataPath} changed from ${oldVal} to ${newVal}`);
              });
            },


            // 表单监听事件--动态监控数据
            dynamicWatch(dataPath, callback) {
                const unwatch = this.$watch(() => this.viewFormData.form[dataPath], (newValue, oldValue) => {
                    callback(newValue, oldValue, dataPath);
                    this.unwatchs.push(unwatch)
                }, {
                    immediate: false,
                    deep: true
                });
            },


        }
    };
</script>

<style>
    .noShowLable .el-form-item__label{
        display: none;
    }

</style>


<style lang="scss">
.avue--detail .el-form-item__label {
    padding-left: 10px !important;
}

    .formGrid{
        border-collapse: collapse;
        .el-form-item{
            border: 1px solid black !important;
        }

        .el-form-item__label {
            border-right: 1px solid black !important;
            margin-left: 5px !important;
        }


        .el-col {
            margin-bottom: -19px !important;
        }

        .is-guttered {
            padding-left: 0px !important;
            padding-right: 0px !important;
        }

        .avue-form__menu--center .el-button {
            margin-top: 20px !important;
            margin-bottom: 20px!important;
        }

    }



    .webapp {
        background-color: #fff;
        position: relative;
        width: 100%;
        height: 100%;

        .form-designer {
            height: 800px;
            overflow-y: scroll;
        }

        .form-designer .widget-config-container .el-tabs__header {
            position: relative;
        }
    }

    .formPreview{


        .formTilte{
            text-align: center;
            font-size: 24px;
        }

        .el-form--label-top{

            .el-form-item__content {
                margin-left: 50px !important;
            }

            .el-radio-group,.el-radio, .el-checkbox-group, .el-checkbox{
                display: block!important;
            }

        }


    }


@media print {
    .formPreview .qrcode {
        display: block;
        /* 其他打印时需要的样式 */
    }
}



.form-div-container {
    .el-form-item__label {
        padding-left: 20px !important;
    }

    .el-form > .el-row {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

    .btnList{
        display: inline-block;
    }

    /*input[readonly]  {*/
    /*    color: var(--el-disabled-text-color);*/
    /*    -webkit-text-fill-color: var(--el-disabled-text-color);*/
    /*    cursor: not-allowed;*/
    /*}*/


    .el-form-item__label[style*="width: 0px"] {
        /* 样式规则 */
        display: none;
    }

}

    @media screen and (max-width: 760px) {
        .el-form-item {
            display: block !important;
            --font-size: 14px;
            margin-bottom: 0px !important;
            border-bottom: 1px solid #f8f8f8;
            background-color: #fff;
            padding: 10px 16px;
        }

        .el-card__body {
            padding: 0px !important;
        }
        .el-carousel {
            margin: -20px -15px!important;
        }

        .van-tabbar__placeholder{
            height: 0px!important;
        }

        .el-carousel__container {
            height: 200px !important;
            position: relative;
        }
        .el-carousel__indicators--outside {
            display: none;
        }

        .el-col {
            margin-bottom: 0px;
        }

        .el-form-item--default {
            margin-bottom: 0px !important;
        }

        .basic-container__card {
            width: 100%;
            background-color: #f8f8f8;
        }


        html, body, #app {

            width: 100%;
            height: 100%;
            background-color: #f8f8f8 !important;

        }

        .avue-group {
            width: 100%;
            padding-top: 5px !important;
        }

        .avue-group .el-collapse-item__wrap {
            border-color: #fff;
            border-radius: 2px;
            padding-bottom: 10px;
            margin-bottom: 0px !important;
        }

        .avue-group .el-collapse-item__header {
            margin-bottom: 0px !important;
        }

        .table-container .el-form-item {
            padding: 2px 10px !important;
        }

        .formPreview {
            padding-top: 0px !important;
            margin-top: 0px !important;

            .form-div-container .el-form-item__label {
                padding-left: 0px !important;
            }

            .van-cell::after {
                border-bottom: 0px solid var(--van-cell-border-color)!important;
            }


            /*.van-field__control:read-only {*/
            /*    color: var(--el-disabled-text-color);*/
            /*    -webkit-text-fill-color: var(--el-disabled-text-color);*/
            /*    cursor: not-allowed;*/
            /*}*/


            //子表单
            .avue-crud__grid__label {
                display: none;
            }

            .avue-crud__grid__content {
                padding: 20px 5px 10px;
            }

            .form-div-container .avue-crud__grid .title .el-button {
                display: none;
            }

            .avue-crud__grid .el-row > div:last-of-type {

                .title .el-button {
                    display: inline-block !important;
                }

            }


        }

        .avue-form__menu {
            padding-right: 5px;
            padding-left: 5px;
            //position: fixed; 按钮遮住了其他元素
            left: 0;
            bottom: 0;
            width: 100%;
        }


        /*.avue-crud__grid .menu .el-button, .avue-crud__grid .title .el-button {*/
        /*    font-size: 12px;*/
        /*    display: none;*/
        /*}*/

    }
</style>
